<template>
  <editor-content :editor="editor" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const props = defineProps<{
  modelValue: string;
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>()

const onUpdate = () => {
  emit('update:modelValue', editor.value.getHTML())
}

const editor = useEditor({
  content: props.modelValue,
  extensions: [StarterKit],
  onUpdate: onUpdate,
})

watch(
  () => props.modelValue,
  (val) => {
    const isSame = val === editor.value.getHTML()

    if (isSame) return

    editor.commands.setContent(val)
  }
)
</script>